<template>
  <q-dialog :value="!!value" ref="modal" @hide="onHide" class="a-light-box" :maximized="maximized">
    <div class="bg-black flex flex-center">
      <img :src="value" class="cursor-pointer" @click="close"/>
    </div>
  </q-dialog>
</template>

<script>
    export default {
      name: 'aLightBox',
      props: {
        value: {
          required: false,
          default: ''
        }
      },
      data () {
        return {
          maximized: false
        }
      },
      watch: {
        value (image) {
          if (!image) {
            return
          }

          const match = image.match(/_(\d+)_(\d+).jpg/)

          if (!match) {
            return false
          }

          const width = match[1]
          const height = match[2]

          if (width >= this.$q.screen.width || height >= this.$q.screen.height) {
            this.maximized = true
          } else {
            this.maximized = false
          }

          this.$refs.modal.show()
        }
      },
      methods: {
        onHide () {
          this.$emit('input', false)
          this.$emit('hide')
        },
        close () {
          this.$refs.modal.hide()
        }
      }
    }
</script>

<style lang="stylus">
  .a-light-box
    .modal-content
      position relative!important
</style>
